<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>位置</title>
    <style>
        html,
        body,
        .map-container{
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
        }
    </style>
</head>

<body style="position: absolute">
<div class="map-container" id="mapContainer"></div>

<script type="text/javascript">
    window._AMapSecurityConfig = {
      // 申请的安全密钥
      securityJsCode: "9b44489a3340ba3fccad40ffe42d8f10",
    }
</script>
<script src="https://webapi.amap.com/loader.js"></script>

<script type="text/javascript">
    const GET = {}
    location.search.replace(/([^?&=]+)=([^&]+)/g, (_, k, v) => (GET[k] = v))

    //地图对象
    const AMapStore = {
      AMapBox: {}, // 地图容器
      map: {}, // 地图配置
      marker: [], // 标记
    }

    // 测试数据
    //if(!GET.latitude1 || !GET.longitude1 || !GET.latitude2 || !GET.longitude2){
       //GET.latitude1 = 30.593354
       //GET.longitude1 = 114.293569
       //GET.latitude2 = 30.613354
       //GET.longitude2 = 114.292569
    //}
    // 初始化
    initMap(GET)

    // 加载地图容器
    async function LoaderMap() {
      try {
        const AMap = await AMapLoader.load({
          key: "dc26fa698495004810b7f0f19173be32", // 请替换成你申请的应用key
          version: "2.0", // 指定要加载的 JS API 的版本
        })
        AMapStore.AMapBox = AMap
      } catch (e) {
        console.error(e)
      }
    }

    // 根据获取的经纬度坐标创建地图
    async function createMap(mapConf) {
      // 中心点计算
      const center = [
        (parseFloat(mapConf.longitude1) + parseFloat(mapConf.longitude2)) / 2,
        (parseFloat(mapConf.latitude1) + parseFloat(mapConf.latitude2)) / 2
      ]
      // 缩放比计算
      const zoom = Math.min(
        Math.log2(400 / Math.abs(mapConf.latitude1 - mapConf.latitude2)),
        Math.log2(180 / Math.abs(mapConf.longitude1 - mapConf.longitude2))
      )

      AMapStore.map = await new AMapStore.AMapBox.Map("mapContainer", {
        mapStyle: "amap://styles/macaron", //设置地图的显示样式
        viewMode: "2D", //默认使用 2D 模式
        zoom, //地图缩放级别
        center //地图中心点
      })
    }

    // 设置定位图标
    async function setMarker(mapConf) {
      const marker1 = await new AMapStore.AMapBox.Marker({
        position: [mapConf.longitude1, mapConf.latitude1],
        icon: "./assets/icons/icon_location1.svg",
        offset: new AMap.Pixel(-13, -30),
      })
      AMapStore.map.add(marker1)

      const marker2 = await new AMapStore.AMapBox.Marker({
        position: [mapConf.longitude2, mapConf.latitude2],
        icon: "./assets/icons/icon_location2.svg",
        offset: new AMap.Pixel(-13, -30),
      })
      AMapStore.map.add(marker2)
    }

    // 地图初始化
    async function initMap(mapConf) {
      await LoaderMap()
      await createMap(mapConf)
      await setMarker(mapConf)

      // http或本地环境不能定位
      // await getLocation()
    }

    // 获取地理位置  （获取用户的）
      async function getLocation() {
        AMapStore.map.plugin('AMap.Geolocation', function () {
          const geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：无穷大
            maximumAge: 0,           //定位结果缓存0毫秒，默认：0
            convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
            showButton: true,        //显示定位按钮，默认：true
            buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
            showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
            panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
            zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          })
          AMapStore.map.addControl(geolocation)
          geolocation.getCurrentPosition()
          // AMap.event.addListener(geolocation, 'complete', function(location, b){
          //   console.log('location', location)
          // }) //返回定位信息
          // AMap.event.addListener(geolocation, 'error', function(err){
          //   console.log('err', err)
          // }) //返回定位出错信息
        })
      }

</script>
</body>
</html>